<template>
  <div class="tabbar">
    <router-link 
      v-for="tabObj in tabArr"
      :key="tabObj.id"
      active-class="current"
      class="tabList" 
      :to="tabObj.to"
    >
      <div :class="tabObj.icocss"></div>
      <span >{{tabObj.msg}}</span>
    </router-link>
  </div>
</template>

<script>
import {reactive} from 'vue'
export default {
  name:'TabBar',
  setup() {
    const tabArr = reactive([
      {
        id: '001',
        to: 'message',
        msg: '消息',
        icocss:'iconfont icon-xiaoxi ico'
      },
      {
        id: '002',
        to: 'linkman',
        msg: '联系人',
        icocss:'iconfont icon-lianxirenxuanzhong ico'
      },
      {
        id: '003',
        to: 'newsfeed',
        msg: '动态',
        icocss:'iconfont icon-dongtai ico'
      },
    ])

    return {
      tabArr
    }
  }
}
</script>

<style scoped>
  .tabbar {
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    padding-top: 2px;
    width: 100%;
    height: 42px;
    background-color: rgb(247, 246, 246);
  }

  .tabbar span {
    display: block;
    width: 50px;
    height: 15px;
    color: black;
    text-align: center;
    font-size: 13px;
  }

  .tabList {
    width: 50px;
    height: 50px;
    color: #fff;
  }

  .ico {
    font-size: 22px;
    text-align: center;
    color: inherit;
  }

  .current {
    color: rgb(0, 154, 254);
  }

</style>